<template>
  <v-list dense nav elevation="4" width="50" class="pa-0 pt-2 pb-2">
    <v-list-item>
      <v-tooltip right>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            v-on="on"
            v-bind="attrs"
            icon
            tile
            @click="setToolType('clicker')"
          >
            <!-- <v-icon>mdi-cursor-default-outline</v-icon> -->
            <v-icon
              large
              color="green darken-2"
            >
              mdi-domain
            </v-icon>
          </v-btn>
        </template>
        <span>鼠标</span>
      </v-tooltip>
    </v-list-item>
    <v-list-item style="position: relative" >
      <v-menu transition="slide-x-transition" right absolute :position-x="50">
        <template v-slot:activator="{ on: menuOn, attrs: menuAttrs }">
          <v-tooltip right>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="{ ...menuAttrs, ...attrs }"
                  v-on="{ ...menuOn, ...on }"
                @click="setToolType('pencil')"
              >
                <v-icon>mdi-draw</v-icon>
              </v-btn>
            </template>
            <span>涂鸦工具</span>
          </v-tooltip>
        </template>

        <v-card>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('pencil')"
              >
                <v-icon>mdi-draw</v-icon>
              </v-btn>
            </template>
            <span>画笔</span>
          </v-tooltip>

          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('pencil')"
              >
                <v-icon>mdi-pencil-outline</v-icon>
              </v-btn>
            </template>
            <span>荧光笔</span>
          </v-tooltip> -->

          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('pencil')"
              >
                <v-icon>mdi-auto-fix</v-icon>
              </v-btn>
            </template>
            <span>魔法笔(松手拟合几何图形)</span>
          </v-tooltip> -->

          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('pencil')"
              >
                <v-icon>mdi-fountain-pen</v-icon>
              </v-btn>
            </template>
            <span>魔法笔(长按2s不动拟合几何图形)</span>
          </v-tooltip> -->
        </v-card>
      </v-menu>
    </v-list-item>

    <v-list-item style="position: relative" >
      <v-menu transition="slide-x-transition" right absolute :position-x="50">
        <template v-slot:activator="{ on: menuOn, attrs: menuAttrs }">
          <v-tooltip right>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="{ ...menuAttrs, ...attrs }"
                v-on="{ ...menuOn, ...on }"
                @click="
                  setToolType('straight')
                "
              >
                <v-icon>mdi-rectangle-outline</v-icon>
              </v-btn>
            </template>
            <span>几何图形</span>
          </v-tooltip>
        </template>

        <v-card>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                style="transform: rotate(-45deg);"
                v-bind="attrs"
                v-on="on"
                @click="setToolType('straight')"
              >
                <v-icon>mdi-minus</v-icon>
              </v-btn>
            </template>
            <span>直线</span>
          </v-tooltip>

          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                    v-on="on"
                @click="setToolType('arrow')"
              >
                <v-icon>mdi-arrow-top-right</v-icon>
              </v-btn>
            </template>
            <span>带箭头直线</span>
          </v-tooltip>

          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                        v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType.TEDU_BOARD_TOOL_TYPE_LINE,
                    true, false, 3, 3
                  )
                "
              >
                <v-icon>mdi-arrow-top-right-bottom-left</v-icon>
              </v-btn>
            </template>
            <span>带箭头直线</span>
          </v-tooltip> -->

          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                        v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType.TEDU_BOARD_TOOL_TYPE_LINE,
                    false, false, 3, 3
                  )
                "
              >
                <v-icon>mdi-arrow-expand</v-icon>
              </v-btn>
            </template>
            <span>带箭头直线</span>
          </v-tooltip> -->
          <!-- <br /> -->
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                        v-on="on"
                @click="setToolType('rectangle')"
              >
                <v-icon>mdi-rectangle-outline</v-icon>
              </v-btn>
            </template>
            <span>矩形</span>
          </v-tooltip>
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                        v-on="on"
                @click="setToolType('rectangle')"
              >
                <v-icon>mdi-square-outline</v-icon>
              </v-btn>
            </template>
            <span>正方形</span>
          </v-tooltip> -->
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                        v-on="on"
                @click="setToolType('ellipse')"
              >
                <v-icon>mdi-ellipse-outline</v-icon>
              </v-btn>
            </template>
            <span>椭圆/圆</span>
          </v-tooltip>
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                        v-on="on"
                @click="setToolType('ellipse')"
              >
                <v-icon>mdi-circle-outline</v-icon>
              </v-btn>
            </template>
            <span>圆</span>
          </v-tooltip>
          <br /> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                        v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_RECT,
                      true, true
                  )
                "
              >
                <v-icon>mdi-rectangle</v-icon>
              </v-btn>
            </template>
            <span>实心矩形</span>
          </v-tooltip> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                        v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_SQUARE_SOLID,
                      true, true
                  )
                "
              >
                <v-icon>mdi-square</v-icon>
              </v-btn>
            </template>
            <span>实心正方形</span>
          </v-tooltip> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_OVAL_SOLID,
                      true, true
                  )
                "
              >
              <v-icon>mdi-ellipse</v-icon>
            </v-btn>
            </template>
            <span>实心椭圆</span>
          </v-tooltip> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_CIRCLE_SOLID,
                      true, true
                  )
                "
              >
                <v-icon>mdi-circle</v-icon>
              </v-btn>
            </template>
            <span>实心圆</span>
          </v-tooltip> -->
          <!-- <br/> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                style="transform: scaleX(-1);"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_RIGHT_TRIANGLE
                  );
                "
              >
                <v-icon>mdi-network-strength-outline</v-icon>
              </v-btn>
            </template>
            <span>直角三角形</span>
          </v-tooltip> -->
          <br />
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('triangle', 'shapeType')"
              >
                <v-icon>mdi-triangle-outline</v-icon>
              </v-btn>
            </template>
            <span>三角形</span>
          </v-tooltip>

          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('pentagram', 'shapeType')"
              >
                <v-icon>mdi-star-outline</v-icon>
              </v-btn>
            </template>
            <span>五角星</span>
          </v-tooltip>

          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('rhombus', 'shapeType')"
              >
                <v-icon>mdi-rhombus-outline</v-icon>
              </v-btn>
            </template>
            <span>菱形</span>
          </v-tooltip>

          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('speechBalloon', 'shapeType')"
              >
                <v-icon>mdi-chat-outline</v-icon>
              </v-btn>
            </template>
            <span>对话气泡</span>
          </v-tooltip>
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                style="transform: skewX(-15deg);"
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_PARALLELOGRAM
                  );
                "
              >
                <v-icon>mdi-rectangle-outline</v-icon>
              </v-btn>
            </template>
            <span>平行四边形</span>
          </v-tooltip> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_COORDINATE
                  );
                "
              >
                <v-icon>mdi-chart-scatter-plot</v-icon>
              </v-btn>
            </template>
            <span>坐标系</span>
          </v-tooltip>
          <br/> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                style="transform: scaleX(-1);"
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_RIGHT_TRIANGLE,
                      true, true
                  );
                "
              >
                <v-icon>mdi-network-strength-4</v-icon>
              </v-btn>
            </template>
            <span>实心直角三角形</span>
          </v-tooltip> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_ISOSCELES_TRIANGLE,
                      true, true
                  )
                "
              >
                <v-icon>mdi-triangle</v-icon>
              </v-btn>
            </template>
            <span>实心等腰三角形</span>
          </v-tooltip> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                style="transform: skewX(-15deg);"
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_PARALLELOGRAM,
                      true, true
                  )
                "
              >
                <v-icon>mdi-rectangle</v-icon>
              </v-btn>
            </template>
            <span>实心平行四边形</span>
          </v-tooltip>
          <br/> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_CUBE
                  )
                "
              >
                <v-icon>mdi-cube-outline</v-icon>
              </v-btn>
            </template>
            <span>立方体</span>
          </v-tooltip> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_CYLINDER
                  )
                "
              >
                <v-icon>mdi-cylinder</v-icon>
              </v-btn>
            </template>
            <span>圆柱</span>
          </v-tooltip> -->
          <!-- <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="
                  setToolType(
                    window.TEduBoard.TEduBoardToolType
                      .TEDU_BOARD_TOOL_TYPE_CONE
                  )
                "
              >
                <v-icon>mdi-cone</v-icon>
              </v-btn>
            </template>
            <span>圆锥</span>
          </v-tooltip> -->
        </v-card>
      </v-menu>
    </v-list-item>

    <v-list-item>
      <v-tooltip right>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            v-on="on"
            v-bind="attrs"
            icon
            tile
            @click="setToolType('selector')"
          >
            <v-icon>mdi-selection-drag</v-icon>
          </v-btn>
        </template>
        <span>选框</span>
      </v-tooltip>
    </v-list-item>
    <v-list-item  style="position: relative">
      <v-menu transition="slide-x-transition" right absolute :position-x="50">
        <template v-slot:activator="{ on: menuOn, attrs: menuAttrs }">
          <v-tooltip right>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                v-bind="{ ...menuAttrs, ...attrs }"
                v-on="{ ...menuOn, ...on }"
                icon
                tile
                @click="setToolType('eraser')"
              >
                <v-icon>mdi-eraser</v-icon>
              </v-btn>
            </template>
            <span>橡皮擦</span>
          </v-tooltip>
        </template>
        <v-card>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('eraser')"
              >
                <v-icon>mdi-eraser</v-icon>
              </v-btn>
            </template>
            <span>整段擦除</span>
          </v-tooltip>

          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="attrs"
                v-on="on"
                @click="setToolType('pencilEraser')"
              >
                <v-icon>mdi-eraser-variant</v-icon>
              </v-btn>
            </template>
            <span>分段擦除</span>
          </v-tooltip>
        </v-card>
      </v-menu>
    </v-list-item>
    <v-list-item>
      <v-tooltip right>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            v-on="on"
            v-bind="attrs"
            icon
            tile
            @click="setToolType('laserPointer')"
          >
            <v-icon>mdi-flare</v-icon>
          </v-btn>
        </template>
        <span>激光笔</span>
      </v-tooltip>
    </v-list-item>
    <v-list-item>
      <v-tooltip right>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            v-on="on"
            v-bind="attrs"
            icon
            tile
            @click="setToolType('hand')"
          >
            <v-icon>mdi-cursor-move</v-icon>
          </v-btn>
        </template>
        <span>抓手工具</span>
      </v-tooltip>
    </v-list-item>
    <v-list-item>
      <v-menu transition="slide-x-transition" right absolute :position-x="50" :close-on-content-click="false">
        <template v-slot:activator="{ on: menuOn, attrs: menuAttrs }">
          <v-tooltip right>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                tile
                v-bind="{ ...menuAttrs, ...attrs }"
                v-on="{ ...menuOn, ...on }"
              >
                <v-icon>mdi-palette</v-icon>
              </v-btn>
            </template>
            <span>工具样式</span>
          </v-tooltip>
        </template>
        <v-card>
          <v-card-text>
            <div style='width: 300px;'>
              <span>画笔粗细</span>
              <v-slider
                v-model="thin"
                dense
                hide-details
                :thumb-size="24"
                :label="String(thin)"
                step="1"
                max="100"
                min="1"
                @change="setBrushThin"
              ></v-slider>
            </div>
            <!-- <span>当前工具颜色</span> -->
            <!-- <v-color-picker
              width="300"
              canvas-height="100"
              flat
              hide-sliders
              hide-inputs
              class="ma-2"
              show-swatches
              :swatches="[
                ['#FF0000'],
                ['#FFFF00'],
                ['#00FF00'],
                ['#00FFFF'],
                ['#0000FF'],
              ]"
              @update:color="setColor"
            ></v-color-picker> -->
            <span>画笔颜色</span>
            <!-- 此处初始值是为了防止首次打开面板时背景色被更改 -->
            <!-- flat -->
            <v-color-picker
                value="#FF0000"
                width="300"
                hide-inputs
                show-swatches
                :swatches="[
                  ['#FF0000'],
                  ['#FFFF00'],
                  ['#00FF00'],
                  ['#00FFFF'],
                  ['#0000FF'],
                ]"
                @update:color="setHighlighterColor"
            ></v-color-picker>
          </v-card-text>
        </v-card>
      </v-menu>
    </v-list-item>
    <v-list-item>
      <v-menu transition="slide-x-transition" right absolute :position-x="50">
        <template v-slot:activator="{ on: menuOn, attrs: menuAttrs }">
          <v-tooltip right>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                v-on="{ ...menuOn, ...on }"
                v-bind="{ ...menuAttrs, ...attrs }"
                icon
                tile
              >
                <v-icon>mdi-broom</v-icon>
              </v-btn>
            </template>
            <span>一键清空</span>
          </v-tooltip>
        </template>
        <v-list>
          <v-list-item @click="cleanAll()">清空白板</v-list-item>
          <!-- <v-list-item @click="cleanAll(true)">清空白板+背景</v-list-item> -->
        </v-list>
      </v-menu>
    </v-list-item>
    
    <!-- <v-list-item>
      <v-tooltip right>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            v-on="on"
            v-bind="attrs"
            icon
            tile
            @click="showSettingPanelDialog()"
          >
            <v-icon>mdi-cog-outline</v-icon>
          </v-btn>
        </template>
        <span>其他设置</span>
      </v-tooltip>
    </v-list-item> -->

    <v-dialog v-if="dialog" v-model="dialog" max-width="800">
    </v-dialog>

    <v-dialog
      v-if="showSettingPanel"
      v-model="showSettingPanel"
      max-width="600"
    >
      <v-card>
        <v-card-title class="headline lighten-2">
          <v-tabs v-model="settingType">
            <v-tab v-for="item in settingTabs" :key="item">
              {{ item }}
            </v-tab>
          </v-tabs>
        </v-card-title>
        <v-card-text>
          <v-tabs-items v-model="settingType">
            <v-tab-item>
              <v-row align="center">
                <v-col align-self="center">
                  <v-switch
                    v-model="settingItems[0].drawEnable"
                    label="允许涂鸦"
                    hide-details
                    @change="setDrawEnable"
                  ></v-switch>
                </v-col>
                <v-col align-self="center">
                  <v-switch
                    v-model="settingItems[0].dataSyncEnable"
                    label="开启数据同步"
                    hide-details
                    @change="setDataSyncEnable"
                  ></v-switch>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col align-self="center">
                  <v-switch
                    v-model="settingItems[0].handwritingEnable"
                    label="开启笔锋"
                    hide-details
                    @change="setHandwritingEnable"
                  ></v-switch>
                </v-col>
                <v-col align-self="center">
                  <v-switch
                    v-model="settingItems[0].showRemoteCursor"
                    label="显示远端画笔"
                    hide-details
                    @click="setRemoteCursorVisible"
                  ></v-switch>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col align-self="center">
                  <v-switch
                    v-model="settingItems[0].enableMultiTouch"
                    label="开启多点触控(只有触摸屏才有效)"
                    hide-details
                    @click="setEnableMultiTouch"
                  ></v-switch>
                </v-col>
              </v-row>
            </v-tab-item>
          </v-tabs-items>
        </v-card-text>
      </v-card>
    </v-dialog>

    <v-dialog
      v-if="customGraphDialog"
      v-model="customGraphDialog"
      max-width="650"
    >
      <v-card>
        <v-card-title>添加自定义图形</v-card-title>
        <v-card-text>
          <v-text-field
            v-model="inputCustomGraph"
            label="自定义图形URL"
            prepend-icon="mdi-image"
          ></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="addToCustomGraphList()"
            >添加至列表</v-btn
          >
          <v-btn text @click="customGraphDialog = false">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-list>
</template>

<script>
/* eslint-disable */
// import Config from '@/config';
// import TiwTranscode from '@/util/TiwTranscode';

export default {
  name: 'Toolbar',
  data() {
    return {
      settingType: null,
      settingTabs: ['基础设置'],
      settingItems: [
        {
          drawEnable: true,
          handwritingEnable: true,
          showRemoteCursor: true,
          dataSyncEnable: true,
          enableMultiTouch: false,
        },
        {
          turnPage: {
            whiteBoard: true,
            h5PPT: true,
            imgPPT: true,
            imgFile: true,
          },
        },
      ],

      currentToolType: 'pencil', // 默认画笔
      dialog: false,
      thin: 5,
      fontSize: 320,
      window,

      formulaEditorDialog: false,
      loadingEditor: true,

      customGraphDialog: false,
      inputCustomGraph: null,

      mediaTab: null,
      backgroundTab: null,
      elementTab: null,

      useNewTranscodeMode: false,

      showSettingPanel: false,

      uploadType: '',
      uploadTypeList: {
        courseware: {
          title: '课件资源',
        },
        media: {
          title: '多媒体资源',
        },
        background: {
          title: '背景资源',
        },
        element: {
          title: '白板元素',
        },
      },
      uploadParamType: '',
      uploadParams: {
        courseware: {
          title: '课件',
          file: null,
          fileName: null,
          accept: '',
          resolution: '',
          pages: 0,
        },
        video: {
          title: '视频文件(MP4)',
          file: '',
        },
        audio: {
          title: '',
          file: '',
        },
        h5File: {
          title: 'H5文件',
          file: '',
        },
        backgroundH5: {
          title: 'H5背景',
          file: '',
        },
        backgroundImg: {
          title: '背景图片',
          file: '',
        },
        imageElement: {
          title: '图片元素',
          file: '',
          left: '',
          right: '',
        },
        h5Element: {
          title: 'H5元素',
          file: '',
          left: '',
          right: '',
        },
        mathBoard: {
          title: '数学画板元素',
          opts: {
            axisColor: '#AEAEAE',
            width: '600',
            height: '600',
          },
          left: '',
          right: '',
        },
        mathGraph: {
          title: '数学函数图像元素',
          opts: {
            mathBoardId: '',
            expression: '',
            color: '#ff0000',
            selectedColor: '#00ff00',
          },
          left: '',
          right: '',
        },
        mathGraphType: {
          title: '几何图形',
          type: null,
        },
        formula: {
          title: '学科公式',
          expression: '',
          erasable: true, // 是否可以擦除
          left: '',
          top: '',
        },
      },
      coursewareFile: null,

      customGraphImages: [
        'https://test-1259648581.cos.ap-shanghai.myqcloud.com/%E4%B8%89%E8%A7%92%E5%BD%A2.svg',
        'https://test-1259648581.cos.ap-shanghai.myqcloud.com/%E6%8A%9B%E7%89%A9%E7%BA%BF_parabolic9.svg',
        'https://test-1259648581.cos.ap-shanghai.myqcloud.com/%E8%8F%B1%E5%BD%A2.svg',
        'https://test-1259648581.cos.ap-shanghai.myqcloud.com/%E6%B1%BD%E8%BD%A6.svg',
        'https://test-1259648581.cos.ap-shanghai.myqcloud.com/%E7%83%A7%E6%9D%AF.svg',
        'https://test-1259648581.cos.ap-shanghai.myqcloud.com/%E7%A3%81%E9%93%81.svg',
      ],

      mathBoardIds: [],

      mathGraphTypes: [],

      cosInstance: null,
      uploadTranscodeFileDialog: false,
      uploadSteps: 1,
      transcodeFileObj: null,
      newTranscodeFileUploading: false,
      newTranscodeUrl: '',

      transcodePercent: 0,
      transcodeStaticMode: false,
      transcodeStart: false,
      transcodeErrMsg: {
        staus: 'SUCCESS',
        code: '',
        error: '',
      },
      colorTask: null // 设置背景颜色的任务
    };
  },
  props: {
    memberNowState: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted() {
    // window.addEventListener('message', (event) => {
    //   try {
    //     const recvData = event.data;
    //     const isString = Object.prototype.toString.call(recvData) === '[object String]';
    //     const data = isString ? JSON.parse(recvData) : recvData;
    //     if (data.cmd === 'tedu-formula-data') {
    //       this.uploadParams.formula.expression = data.data;
    //       this.formulaEditorDialog = false;
    //       this.loadingEditor = true;
    //     }
    //   } catch (e) {
    //     // console.error(e);
    //   }
    // });

    // this.cosInstance = new window.COS({
    //   // 本地生成密钥（不推荐线上使用）
    //   SecretId: Config.tencentSecretId,
    //   SecretKey: Config.tencentSectetKey,
    // });
    
    
  },

  watch: {
    '$store.state.current.fileInfo': {
      handler() {
        // this.mathBoardIds = window.teduBoard
        //   .getBoardElementList()
        //   .filter(i => i.type
        //       === TEduBoard.TEduBoardElementType.TEDU_BOARD_ELEMENT_MATH_BOARD)
        //   .map(i => i.elementId);
      },
      deep: true,
    },
    'memberNowState': {
      handler() {
        if (this.memberNowState.strokeWidth) {
          this.thin = this.memberNowState.strokeWidth
        }
      },
      deep: true,
    },
    elementTab(val) {
      if (val === 3) {
        // this.mathBoardIds = window.teduBoard
        //   .getBoardElementList()
        //   .filter(i => i.type
        //       === TEduBoard.TEduBoardElementType.TEDU_BOARD_ELEMENT_MATH_BOARD)
        //   .map(i => i.elementId);
      }
    },
    useNewTranscodeMode() {
      this.newTranscodeUrl = '';
      this.transcodeFileObj = null;
      this.uploadTranscodeFileDialog = false;
      this.uploadSteps = 1;
      this.uploadParams.courseware.file = null;
      this.uploadParams.courseware.fileName = null;
      this.uploadParams.courseware.pages = 0;
      this.uploadParams.courseware.resolution = '';
    },
    uploadTranscodeFileDialog(val) {
      if (!val) {
        this.uploadSteps = 1;
      }
    },
  },

  methods: {
    formatColor(color) {
      const [r, g, b, a] = color.match(/[\d.]+/).map(i => +i);
      return { r, g, b, a };
    },

    setToolType(toolType, shapeType) {
      // console.log(toolType)
      if (toolType == 6) return
      // console.log('setToolType:', isSolidLine, isFill, startArrowType, endArrowType);
      this.currentToolType = toolType;
      if (shapeType) {
        this.$emit('boardEdit', { type: 'setshapeType', params: { toolType } })
      } else {
        this.$emit('boardEdit', { type: 'setToolType', params: { toolType } })
      }
     
      // window.teduBoard.setToolType(toolType);
      // let lineType = null;
      // if (isSolidLine) {
      //   lineType = TEduBoard.TEduBoardLineType.TEDU_BOARD_LINE_TYPE_SOLID;
      // } else {
      //   lineType = TEduBoard.TEduBoardLineType.TEDU_BOARD_LINE_TYPE_DOTTED;
      // }
      // window.teduBoard.setGraphStyle({
      //   lineType: lineType,
      //   fillType: isFill ? TEduBoard.TEduBoardFillType.SOLID : TEduBoard.TEduBoardFillType.NONE,
      //   startArrowType: startArrowType,
      //   endArrowType: endArrowType,
      // });
    },

    /**
     * 工具类型
     * @param {*} toolType 画笔工具
     * @param {*} autoFitMode 自动拟合模式 0 不开启拟合 1 松手拟合 2 按住2s不动拟合
     */
    setPenToolType(toolType, autoFitMode = 0) {
      this.currentToolType = toolType;
      // window.teduBoard.setToolType(toolType);

      // if (autoFitMode === 0) { // 如果是不拟合
      //   window.teduBoard.enablePenAutoFit(false); // 关闭按住2s拟合
      //   window.teduBoard.setPenAutoFittingMode(TEduBoard.TEduBoardPenFittingMode.NONE); // 关闭松手自动拟合
      //   window.teduBoard.setHandwritingEnable(this.settingItems[0].handwritingEnable); // 笔锋以设置面板的值为准
      // } else if (autoFitMode === 1) { // 如果是松手拟合
      //   window.teduBoard.enablePenAutoFit(false); // 关闭按住2s拟合
      //   window.teduBoard.setHandwritingEnable(false); // 关闭笔锋
      //   window.teduBoard.setPenAutoFittingMode(TEduBoard.TEduBoardPenFittingMode.AUTO); // 开启松手自动拟合
      // } else if (autoFitMode === 2) { // 如果是按住2s不动拟合
      //   window.teduBoard.setHandwritingEnable(false); // 关闭笔锋
      //   window.teduBoard.setPenAutoFittingMode(TEduBoard.TEduBoardPenFittingMode.NONE); // 关闭松手自动拟合
      //   window.teduBoard.enablePenAutoFit(true, 2000); // 开启按住2s拟合
      // }
    },

    setBrushThin(thin) {
      // window.teduBoard.setBrushThin(thin);
      this.$emit('boardEdit', { type: 'setBrushThin', params: { thin } })
    },

    setTextSize(size) {
      // window.teduBoard.setTextSize(size);
    },

    setColor(color) {
      // if (
      //   // this.currentToolType
      //   // === window.TEduBoard.TEduBoardToolType.TEDU_BOARD_TOOL_TYPE_TEXT
      // ) {
      //   // window.teduBoard.setTextColor(color.hex);
      // } else {
      //   // window.teduBoard.setBrushColor(color.hex);
      // }
    },

    setBackgroundColor(color) {
      clearTimeout(this.colorTask);
      this.colorTask = setTimeout(() => {
        const r = color.rgba.r;
        const g = color.rgba.g;
        const b = color.rgba.b;
        const a = color.rgba.a;
        const rgbaColor = `rgba(${r}, ${g}, ${b}, ${a})`;
        // window.teduBoard.setBackgroundColor(rgbaColor);
      }, 200);
    },

    setHighlighterColor(color) {
      const r = color.rgba.r;
      const g = color.rgba.g;
      const b = color.rgba.b;
      let a = Number(color.rgba.a.toFixed(1)).valueOf();
      a = Math.min(0.9, Math.max(a, 0.1));
      // const highlighterColor = `rgba(${r}, ${g}, ${b}, ${a})`;
      const highlighterColor = [r, g, b];
      // window.teduBoard.setHighlighterColor(highlighterColor);
      this.$emit('boardEdit', { type: 'setHighlighterColor', params: { highlighterColor } })
    },

    cleanAll(removeBackground = false) {
      // window.teduBoard.clear(removeBackground);
      this.$emit('boardEdit', { type: 'cleanAll', params: { removeBackground } })
    },

    useMathTool(tool = 1) {
      // window.teduBoard.useMathTool(tool);
    },

    showUploadDialog(type) {
      this.uploadType = type;
      this.dialog = true;
    },

    showSettingPanelDialog() {
      this.showSettingPanel = true;
    },

    uploadFile() {
     
    },

    setCustomGraph(url) {
      // window.teduBoard.addElement(
      //   window.TEduBoard.TEduBoardElementType.TEDU_BOARD_ELEMENT_CUSTOM_GRAPH,
      //   url,
      // );
    },

    setDrawEnable() {
      // window.teduBoard.setDrawEnable(this.settingItems[0].drawEnable);
    },

    setHandwritingEnable() {
      // window.teduBoard.setHandwritingEnable(this.settingItems[0].handwritingEnable);
    },

    setDataSyncEnable() {
      // window.teduBoard.setDataSyncEnable(this.settingItems[0].dataSyncEnable);
    },

    setRemoteCursorVisible() {
      // window.teduBoard.setRemoteCursorVisible(this.settingItems[0].showRemoteCursor);
    },

    setEnableMultiTouch() {
      // const enable = this.settingItems[0].enableMultiTouch;
      // window.teduBoard.enableMultiTouch(enable);
      // window.teduBoard.setSyncFps(enable ? 10 : 5);
    },

    addToCustomGraphList() {
      if (!this.customGraphImages.includes(this.inputCustomGraph)) {
        this.customGraphImages.push(this.inputCustomGraph);
        console.log(this.customGraphDialog);
      }
      this.customGraphDialog = false;
    },

    viewDoc() {
      window.open(
        'https://cloud.tencent.com/document/product/1137/55888',
        '_blank',
      );
    },

    // 设置数学工具
    setMathGraphType() {
      // window.teduBoard.setMathGraphType(
      //   this.uploadParams.mathGraphType.type,
      //   true,
      // );
    },

    // 设置鼠标操作行为
    setMouseToolBehavior() {
      // window.teduBoard.setMouseToolBehavior({
      //   turnPage: this.settingItems[1].turnPage,
      // });
    },

    uploadNewTranscodeFile() {
     
    },

    createTranscodeTask() {
      
    },

    setPiecewiseErasureEnable(enable) {
      // window.teduBoard.setPiecewiseErasureEnable(enable);
    },
  },
};
</script>

<style scoped>
</style>
